<template>
	<view class="dialog-wrapper">
		<view class="dialog">
			<view class="dialog-head">
				<view class="dialog-title">添加售卖/赠送信息</view>
				<image class="dialog-header_btn" src="@/static/approval/deletes.png" @click="closeDialog" />
			</view>
			<view class="dialog-main">
				<view class="c-row-box">
					<view class="c-row-item">
						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title"><text style="color: red;">*</text>选择类型</view>
								<view class="col-text">
									<picker mode="selector" :range="addType" range-key="title" @change="addTypeChange"
										:disabled="isPreview">
										<view>{{otherPriceItem.title == '' ? '请选择' : otherPriceItem.title}}</view>
									</picker>
								</view>
							</view>
						</view>
						<view class="c-row c-row-list other-input" v-if="otherPriceItem.type == 'other'">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									其他类型
								</view>
								<view class="col-text"><input type="text" v-model="otherPriceItem.other_value" placeholder="请录入" /></view>
							</view>
						</view>
						<view class="c-row c-row-list" v-if="['sugar', 'wine', 'dessert', 'led', 'light', '3d', 'rite'].includes(otherPriceItem.type)">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">
									<text style="color: red;">*</text>
									选择{{ otherPriceItem.title }}
								</view>
								<view class="col-text">
									<picker
										mode="selector"
										:range="dictionary.getPickerByTag(otherPriceItem.type)"
										:data-type="otherPriceItem.type"
										range-key="title"
										@change="changeAddonsCategory"
										:disabled="isPreview"
									>
										<view>{{ dictionary.getTitleByTag(otherPriceItem.type, otherPriceItem.tag_id, '请选择') }}</view>
									</picker>
								</view>
							</view>
						</view>
						<view class="c-row c-row-list" v-if="otherPriceItem.id == 11">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title"><text style="color: red;">*</text>增项名称</view>
								<view class="col-text">
									<input type="text" :disabled="isPreview" v-model="otherPriceItem.other_name"
										placeholder="请输入" />
								</view>
							</view>
						</view>
						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title"><text style="color: red;">*</text>增项数量</view>
								<view class="col-text">
									<input type="digit" :disabled="isPreview" v-model="otherPriceItem.amount"
										placeholder="请输入" @input="addPriceChange" />
								</view>
							</view>
						</view>
						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title"><text style="color: red;">*</text>增项价格</view>
								<view class="col-text">
									<input type="digit" :disabled="isPreview" v-model="otherPriceItem.price"
										placeholder="请输入" @input="addPriceChange" />
								</view>
							</view>
						</view>
						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title"><text style="color: red;">*</text>增项小计</view>
								<view class="col-text">
									<view>{{otherPriceItem.total}}</view>
								</view>
							</view>
						</view>
						<view class="c-row c-row-list">
							<view class="c-row-col c-row-col-list-item">
								<view class="col-title">备注</view>
								<view class="col-text">
									<input type="text" :disabled="isPreview" v-model="otherPriceItem.remark"
										placeholder="请输入" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="dialog-footer">
				<button class="c-button c-button-small c-button-primary" @click="addOtherItem"
					v-if="!isPreview">添加</button>
				<button class="c-button c-button-small c-button-primary" @click="closeDialog" v-if="isPreview">确定</button>
				<button class="c-button c-button-small" @click="closeDialog">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	import dictionary from '@/utils/dictionary.js';
	export default {
		props: {
			addons: {
				type: Array,
				default () {
					return []
				}
			},
			ritualList: {
				type: Array,
				default () {
					return []
				}
			},
			addType:{
				type: Array,
				default(){
					return []
				}
			},
			isPreview:{
				type: Boolean,
				default(){
					return false
				}
			}
		},
		data() {
			return {
				otherPriceItem: {
					id: '',
					ritual_title: '',
					ritual_id: 0,
					title: '',
					other_name: '',
					type: '',
					amount: 0,
					price: 0,
					total: 0,
					remark: ''
				},
			};
		},
		beforeMount() {
			this.dictionary = dictionary;
		},
		methods: {
			// 关闭弹框
			closeDialog() {
				this.$emit('closeDialog')
			},
			
			showDialog(data){
				this.otherPriceItem = data
			},

		// 添加类型变化。选的婚车的情况，要显示婚车的dialog
			addTypeChange(e) {
				let that = this;
				let index = e.target.value;
				let last = this.addType.length - 1;
				// 非婚车增项
				this.otherPriceItem.title = this.addType[index].title;
				this.otherPriceItem.id = this.addType[index].id;
				this.otherPriceItem.type = this.addType[index].type;
				this.otherPriceItem.tag_id = 0;
					
			},
			// 切换所选类型下面的具体商品
			changeAddonsCategory(e) {
				let index = e.target.value;
				let tag = e.target.dataset.type;
				let pickList = dictionary.getPickerByTag(tag);
				this.otherPriceItem.tag_id = pickList[index]['id'];
				let tagTitle = dictionary.getTitle(pickList, this.otherPriceItem.tag_id);
				this.otherPriceItem.tag_title = tagTitle;
				this.$forceUpdate();
			},
			// 仪式
			ritualChange(e) {
				let index = e.target.value;
				this.otherPriceItem.ritual_title = this.ritualList[index].title;
				this.otherPriceItem.ritual_id = this.ritualList[index].id;
			},

			// 其他费用发生改变时
			addPriceChange() {
				this.otherPriceItem.total = (parseFloat(this.otherPriceItem.amount == '' ? 0 : this.otherPriceItem
						.amount) *
					parseFloat(this.otherPriceItem
						.price == '' ? 0 : this.otherPriceItem.price)).toFixed(2)
			},

			// 确认添加/编辑
			addOtherItem() {
				if (this.otherPriceItem.title == '' || this.otherPriceItem.amount == 0) {
					uni.showToast({
						icon: 'none',
						title: '请填写完整'
					})
				} else {
					// for(let i = 0; i < this.addons.length; i++){
					// 	if(this.addons[i].id == this.otherPriceItem.id){
					// 		uni.showToast({
					// 			icon: 'none',
					// 			title: '你已添加过该项，请勿重复添加'
					// 		})
					// 		return false;
					// 	}
					// }

					for (let i = 0; i < this.addType.length; i++) {
						if (this.addType[i].id == this.otherPriceItem.id) {
							this.addType.splice(i, 1)
						}
					}

					this.addons.push(this.otherPriceItem);
					this.closeDialog();
					this.$emit('getOtherPrice', this.addons)
					console.log(this.addons)
				}
			},

		}
	}
</script>

<style lang="less">
	@import url('../../../order/createOrder/components/common.less');
	@import url('../../../order/components/common.less');
</style>
